<template>
    <div class="listright">
        <ul>
            <li v-for="(v,i) in categoryImgList" :key="i" @click="gotogoodslist(v.type)">
                <img :src="v.img" alt="">
            </li>
        </ul>
    </div>
</template>

<script>

import {categoryImgList} from '@/utils/tool.js'
export default {
    data(){
        return{
            categoryImgList,
        }
        
    },
    methods:{
        gotogoodslist(x){
            // console.log(x)
            this.$router.push({name:'goodslist',query:{type:x}})
        }
    },
}
</script>




<style lang="scss" scoped>
    .listright{
        padding: 12px 0 24px 0 ;
        // background-color: #fff;
        background-image: linear-gradient(#e4f6f8,#f8f7e0,#f6ebef,#e8f8f0);
        ul{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            li{
                width: 90%;
                margin: 12px 0;
                
                img{
                    width: 100%;
                    box-shadow: 0 0.05rem 0.05rem rgba(0,0,0,.15);
                    border-radius: 8px;
                }
            }
        }

    }
</style>